<template>
  <div class="geXing_container" v-loading="domLoading">
    <el-carousel style="z-index: 1" :interval="4000" type="card" height="200px">
      <el-carousel-item  v-for="item in banner" :key="item.bannerId">
        <img @click="gongBoFangSing(item.song)" class="image" :src="item.pic" />
      </el-carousel-item>
    </el-carousel>

    <div class="tuiJianGeDan">
      <div class="tuiJianGeDan_title">
        推荐歌单
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="tuiJianGeDan_container">
        <div
          class="tuiJianGeDan_container_inside"
          v-for="item in personalized"
          :key="item.id"
          @click="goToGeDanInfo(item.id)"
        >
          <div class="tuiJianGeDan_container_inside_img">
            <div class="bofang">{{ item.trackCount }}万</div>
            <img :src="item.picUrl" />
          </div>
          <div class="tuiJianGeDan_container_inside_text">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="duJiaFangSong">
      <div class="duJiaFangSong_title">
        独家放送
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="duJiaFangSong_conatiner">
        <div
          class="duJiaFangSong_inside"
          @click="jumpVideo(item.id)"
          :style="{ width: innerWidth === availWidth ? '32%' : '30%' }"
          v-for="item in privatecontent"
          :key="item.id"
        >
          <div
            class="duJiaFangSong_inside_img"
            :style="[
              { 'background-image': 'url(' + item.sPicUrl + ')' },
              { height: innerWidth === availWidth ? '250px' : '138px' },
            ]"
          >
            <img src="../../../../assets/bofang.png" />
          </div>
          <div class="duJiaFangSong_inside_text">{{ item.copywriter }}</div>
        </div>
      </div>
    </div>
    <div class="newsong">
      <div class="newsong_title">
        最新音乐
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="newsong_container">
        <div class="newsong_inside" v-for="item in newsong" :key="item.id">
          <div
            @click="
              boFangSing(item.name, item.song.artists, item.picUrl, item.id)
            "
            class="newsong_inside_left"
            :style="{ 'background-image': 'url(' + item.picUrl + ')' }"
          >
            <div class="newsong_inside_left_inside">
              <img src="../../../../assets/bofang2.png" />
            </div>
          </div>
          <div class="newsong_inside_right">
            <div class="newsong_inside_right_title">{{ item.name }}</div>
            <div class="newsong_inside_right_song">
              <span
                class="newsong_inside_right_song_one"
                v-for="(childItem, index) in item.song.artists"
                :key="childItem.id"
              >
                {{
                  (index == item.song.artists.length - 1 && childItem.name) ||
                  childItem.name + "/"
                }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="newMV">
      <div class="newMV_title">
        推荐MV
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="newMV_container">
        <div
          class="newMV_container_inside"
          v-for="item in personalizedMv"
          :key="item.id"
          @click="jumpVideo(item.id)"
        >
          <div
            class="newMV_container_inside_pic"
            :style="[
              { 'background-image': 'url(' + item.picUrl + ')' },
              { height: innerWidth === availWidth ? '150px' : '100px' },
            ]"
          >
            <div class="newMV_container_inside_imgAndText">
              <img src="../../../../assets/bf.png" />
              <span class="boFangLiang">{{ item.playCount }}</span>
            </div>
          </div>
          <div class="newMV_container_inside_title">{{ item.name }}</div>
          <span
            class="newMV_container_inside_name"
            v-for="(childItem, index) in item.artists"
            :key="childItem.id"
          >
            {{
              (index == item.artists.length - 1 && childItem.name) ||
              childItem.name + "/"
            }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  banner,
  personalized,
  privatecontent,
  newsong,
  personalizedMv,
} from "../../../../api/index";
import { commonJs,boFangSing } from "../../../../common/mixin/commonJs";
export default {
  mixins: [commonJs,boFangSing],
  created() {
    this.domLoading = true;
    banner({
      type: 1,
    }).then((res) => {
      this.banner = res.banners;
      personalized({
        limit: 10,
      }).then((res) => {
        this.personalized = res.result;
        privatecontent().then((res) => {
          this.privatecontent = res.result;
          newsong({
            limit: 24,
          }).then((res) => {
            this.newsong = res.result;
            personalizedMv().then((res) => {
              this.personalizedMv = res.result;
              this.domLoading = false;
            });
          });
        });
      });
    });
  },
  data() {
    return {
      // availWidth: null,
      // innerWidth: null,
      domLoading: false,
      banner: [],
      personalized: [],
      privatecontent: [],
      newsong: [],
      songs: [],
      personalizedMv: [],
    };
  },
  methods: {
    gongBoFangSing(song){
      if(song == null || song == undefined || song == ''){
        return
      }else{
        this.boFangSing(song.name,song.ar,song.al.picUrl,song.id)
      }
    },
    goToGeDanInfo(id) {
      this.$router.push({
        path: "/geDanInfo",
        query: {
          id
        },
      });
    },
    jumpVideo(id) {
      const status = 1;
      this.$router.push({
        path: "/video",
        query: {
          id,
          status,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../common/css/commonStyle";

.geXing_container {
  .image {
    width: 100%;
    height: 100%;
  }

  .el-carousel__button {
    background: red;
  }

  .tuiJianGeDan {
    width: 100%;
    margin-top: 20px;

    .tuiJianGeDan_title {
      font-size: 19px;
      font-weight: 800;
      cursor: pointer;

      .el-icon-arrow-right {
        margin-right: 3px;
      }
    }

    .tuiJianGeDan_container {
      width: 100%;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      .tuiJianGeDan_container_inside {
        width: 17%;
        //height: 190px;
        //background: red;
        margin-top: 10px;
        cursor: pointer;

        .tuiJianGeDan_container_inside_img {
          width: 100%;

          //height: 129px;
          // background: yellow;
          .bofang {
            font-size: 12px;
            position: relative;
            color: white;
            top: 20px;
            left: 5px;
          }

          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
        }

        .tuiJianGeDan_container_inside_text {
          width: 100%;
          height: 51px;
          font-size: 16px;
          font-weight: 300;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
        }
      }
    }
  }

  .duJiaFangSong {
    margin-top: 40px;

    .duJiaFangSong_title {
      font-size: 19px;
      font-weight: 800;
      cursor: pointer;
      margin-bottom: 20px;

      .el-icon-arrow-right {
        margin-right: 3px;
      }
    }

    .duJiaFangSong_conatiner {
      width: 100%;
      display: flex;
      justify-content: space-around;

      .duJiaFangSong_inside {
        cursor: pointer;
        //background: greenyellow;
        .duJiaFangSong_inside_img {
          width: 100%;
          //background: red;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          border-radius: 5px;

          img {
            margin-left: 5px;
            margin-top: 5px;
          }
        }

        .duJiaFangSong_inside_text {
          margin-top: 10px;
          font-weight: 100;
        }
      }
    }
  }

  .newsong {
    width: 100%;
    margin-top: 40px;

    .newsong_title {
      font-size: 19px;
      font-weight: 800;
      cursor: pointer;
      margin-bottom: 20px;

      .el-icon-arrow-right {
        margin-right: 3px;
      }
    }

    .newsong_container {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      //justify-content: space-around;

      .newsong_inside {
        margin-right: 20px;
        width: 30%;
        height: 80px;
        //background: olivedrab;
        margin-bottom: 10px;
        display: flex;

        .newsong_inside_left {
          width: 80px;
          height: 80px;
          border-radius: 5px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          @include flex;
          cursor: pointer;

          .newsong_inside_left_inside {
            background: white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            @include flex;
          }
        }

        .newsong_inside_right {
          width: 155px;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin-left: 10px;

          .newsong_inside_right_title {
            @include white_space;
            font-size: 18px;
          }

          .newsong_inside_right_song {
            @include white_space;
            font-size: 14px;
            color: rgb(141, 139, 137);
          }
        }
      }
    }
  }

  .newMV {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 30px;

    .newMV_title {
      font-size: 19px;
      font-weight: 800;
      cursor: pointer;
      margin-bottom: 20px;

      .el-icon-arrow-right {
        margin-right: 3px;
      }
    }

    .newMV_container {
      width: 100%;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      .newMV_container_inside {
        width: 23%;
        cursor: pointer;

        .newMV_container_inside_pic {
          width: 100%;
          height: 100px;
          border-radius: 5px;
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .newMV_container_inside_imgAndText {
            .boFangLiang {
              font-size: 12px;
              color: white;
            }
          }
        }

        .newMV_container_inside_title {
          margin-top: 5px;
          @include white_space;
        }

        .newMV_container_inside_name {
          margin-top: 5px;
          font-size: 14px;
          @include white_space;
          color: rgb(172, 168, 168);
        }
      }
    }
  }
}
</style>
